<template>
	<view class="box">
		<view class="index-bg">
            <image :src='BASE_URL+"/uploads/20250801/23822b83b17213635ab90d27baef2caa.png"' mode="widthFix"></image>

		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#000"}' title="便民服务" bgColor="transparent" @rightClick="rightClick"
				:fixed="false" :autoBack="true"> </u-navbar>

			<view class="padding-l-r-25">
				<view class="search-box align-items-center">
					<view class="padding-l-r-10">
						<u-icon name="search" color="#707070" size="24"></u-icon>
					</view>
					<view class="flex-1"><input type="search" placeholder="搜索"></view>
					<view class="btn">搜索</view>
				</view>
				<view class="img-box align-items-center">
					<view class="img-list" @click="goService('free')">
						<image src="/static/image/service/service-1.png" mode="widthFix"></image>
						<text>义诊服务</text>
					</view>
					<view class="img-list" @click="goService('service')">
						<image src="/static/image/service/service-2.png" mode="widthFix"></image>
						<text>陪诊服务</text>
					</view>
					<view class="img-list">
						<image src="/static/image/service/service-3.png" mode="widthFix"></image>
						<text>针头线脑</text>
					</view>
					<view class="img-list">
						<image src="/static/image/service/service-4.png" mode="widthFix"></image>
						<text>跳瘙市场</text>
					</view>
					<view class="img-list">
						<image src="/static/image/service/service-5.png" mode="widthFix"></image>
						<text>喜结良缘</text>
					</view>
				</view>
				<view >
					<view class="service-title justifyContent-spaceBetween">
						<text>陪诊服务</text>
						<view class="more" @click="goList">
							更多 >
						</view>
					</view>
					<view>
						<scroll-view scroll-x="true">
							<view class="flex-box" :style="{'width':accompanyingList.length * 260 +'rpx'}">
								<view v-for="item in accompanyingList" class="accompanying-list " @click="goAccompanyingDetails(item)">
									<u-avatar :src="item.image" shape="square" size='220rpx'></u-avatar>
									<view class="name only-1">{{item.title}}</view>
									<view class="time"> {{item.subtitle}} </view>
									<view class="interested">￥{{item.price}} </view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view>
					<view class="service-title justifyContent-spaceBetween">
						<text>社区医疗服务活动中心</text>
						<view class="registration">
							一键报名
						</view>
					</view>
					<view class="padding-l-r-20 bg-white ">
						<freeClinic :activityList='activityList' @goDetails='goDetails' @signUp='signUp'></freeClinic>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeClinic from '@/components/freeClinic/index.vue'
    import $baseUrl from "@/config/index.js"
    const BASE_URL = $baseUrl.baseUrl
    import {
        serviceList,playList,playSign
	} from '@/api/service'
    import {nurseList,} from '@/api/homeCare'
	export default {
		components: {
			freeClinic,
		},
		data() {
			return {
                BASE_URL,
				accompanyingList: [ ],
				activityList: [ ],
                page:1,
                pageA:1,
                isMore:true
			}
		},
		onLoad() {
            this.init()
        },
        //上拉加载函数
        onReachBottom(){
            if(this.isMore){
                setTimeout(()=>{
                    this.getPlayList()
                },100)
            }else{
                uni.showToast({
                    title: '暂无更多',
                    icon: 'none'
                })
            }

        },
        onPullDownRefresh () {
            //刷新初始化数据
            this.init()
            //关闭刷新动画
            setTimeout(function () {
                uni.stopPullDownRefresh()
            }, 1000)
        },
		methods: {
            init(){
                this.page=1
                this.activityList =[]
                this.getPlayList()
                this.getAccompanyingList()
            },
            getPlayList(){
                let data = {
                    page:this.page,
                    limit:10,
                    type:1
                },arr = []
                playList(data).then(res=>{
                    if (res.code==1){
                        arr= res.data
                        arr.map(item=>{
                            let startDate = new Date(item.start_date);
                            let endDate = new Date(item.end_date);
                            let currentDate = new Date();
                            // 判断当前日期是否在开始日期之前
                            if (currentDate < startDate) {
                                console.log("当前日期在开始日期之前");
                                item.isBeforeStart = true
                            }
                            // 判断当前日期是否在结束日期之后
                            else if (currentDate > endDate) {
                                console.log("当前日期在结束日期之后");
                                item.isAfterEnd = true
                            }
                            // 否则，当前日期在开始和结束日期之间（包含等于的情况）
                            else {
                                console.log("当前日期在开始日期和结束日期之间");
                            }
                        })
                        this.activityList=this.activityList.concat(arr)
                        if (res.data.length < 10){
                            this.isMore = false
                        }else {
                            this.isMore = true
                            this.page ++
                        }
                    }else {
                        uni.showToast({
                            title:res.msg,
                            icon:'none'
                        })
                    }
                })
            },
			goAccompanyingDetails(item){
				uni.navigateTo({
					url:'/pageA/service/details?id='+item.id
				})
			},
            getAccompanyingList(){
                let data ={
                    page:this.pageA,
                    limit:10,
                    type:2
                }
                serviceList(data).then(res=>{
                   if (res.code ==1){
                       this.accompanyingList=res.data
                   }else {
                       uni.showToast({
                           title:res.msg,
                           icon:'none'
                       })
                   }
                })
            },


			goList() {
				uni.navigateTo({
					url: '/pageA/service/list'
				})
			},
			goDetails(item) {
                uni.navigateTo({
                    url: '/pageA/service/scienceDetails?id='+item.id
                })
			},
			signUp(item) {
                playSign({play_id:[item.id]}).then(res=>{
                    if (res.code==1){
                        uni.showToast({
                            title:'报名成功',
                            icon:'none'
                        })
                        this.getPlayList()
                    }else {
                        uni.showToast({
                            title:res.msg,
                            icon:'none'
                        })
                    }
                })
			},
			goService(type) {
				let url
				if (type == 'free') {
					url = "/pageA/freeClinic/freeClinic"

				}
				if ('service' == type) {
					url = "/pageA/service/list"
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background: #F7F7F7;
	}

	.search-box {
		font-size: 28rpx;
		height: 66rpx;
		background: rgba(255, 255, 255, 0.16);
		border-radius: 33rpx;
		border: 1px solid rgba(255, 255, 255, 0.49);

		.btn {
			width: 100rpx;
			height: 56rpx;
			color: #fff;
			text-align: center;
			line-height: 56rpx;
			background: #43ABC4;
			border-radius: 28rpx;
		}
	}

	.img-box {
		justify-content: space-between;
		margin-top: 46rpx;
		margin-bottom: 27rpx;

		image {
			width: 100rpx;
			margin-bottom: 24rpx;
		}

		text {

			font-size: 26rpx;
			color: #000;
		}
	}

	.service-title {
		height: 108rpx;
		align-items: center;

		text {
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
		}

		.more {
			font-size: 24rpx;
			color: #808080;
		}

		.registration {
			position: relative;
			color: #43ABC4;
			font-size: 30rpx;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				height: 1px;
				width: 100%;
				background-color: #43ABC4;
			}
		}
	}

	.accompanying-list {
		padding: 10rpx;
		width: 240rpx;
		height: 380rpx;
		margin-right: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.name {
			line-height: 62rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #000;
		}

		.time {
			margin-bottom: 10rpx;
			font-size: 22rpx;
			color: #4D4D4D;
		}

		.interested {
			font-size: 22rpx;
			color: #999;
		}
	}



	.bg-white {
		border-radius: 14rpx;
		overflow: hidden;
	}
</style>
